<template>
	<view class="eventDetails_box">
		<view class="account_container">
			<view class="account_conatiner_top_bar">
				<view class="" style="margin-right: 20rpx;" @click="goback">
					<image src="../../static/back.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
				</view>
				<view class="">
					活动详情
				</view>
			</view>
		</view>
		<view class="account_container_num">
			<image :src="eventDetails.image" mode=""></image>
		</view>
		<view class="account_container_detail">
			<view class="uni-padding-wrap uni-common-mt">
				<!-- 				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" /> -->
				{{eventDetails.title}}
			</view>
			<view class="content" style="margin-bottom: 40rpx;" v-if="isOrganizer">
				<view class="statistics_num" @click="gotoPeopleList">
					<view class="statistics_num_text">
						已有{{peopleNum || 0}}人报名参与
					</view>
					<view class="statistics_num_img">
						<view class="statistics_num_img_item" v-if="index < 6"
							v-for="(item,index) in eventDetails.registerAvatar" :key="index">
							<img :src="item" alt="" />
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="bg">

				</view>
				<view class="eventDetails_container" :class="optionValue?'p1':'p2'">
					<view class="">

						<view class="tab">
							<view class="item left" :class="optionValue?'':'eee'"
								@click="optionValue=true,showDetail=true">
								活动详情
							</view>
							<view class="item right" :class="optionValue?'eee':''"
								@click="optionValue=false,showDetail=false">
								动态</view>
						</view>
						<view class="" v-if="optionValue" style="padding-bottom:100rpx;">
							<view class="create_user">
								<view class="create_user_img">
									<img :src="eventDetails.organizer.avatar" alt="" />
								</view>
								<view class="create_user_detail">
									<view class="create_user_detail_text">
										{{eventDetails.organizer.name || ''}}
									</view>
									<view class="create_user_detail_desc">
										活动发起人
									</view>
								</view>
							</view>
							<view class="divider"></view>
							<view class="pulic_info">
								<view class="pulic_info_item">
									<view class="pulic_info_item_left">
										<image src="../../static/postion.png" mode=""></image>
									</view>
									<view class="pulic_info_item_right textOver">
										{{eventDetails.address || '未知'}}
									</view>
									<image src="../../static/share.png" mode=""
										style="width: 44rpx;height: 44rpx;margin-left: 14rpx;" @click="navigateToMap">
									</image>
								</view>
								<view class="pulic_info_item">
									<view class="pulic_info_item_left">
										<image src="../../static/phone.png" mode=""></image>
									</view>
									<view class="pulic_info_item_right">
										{{eventDetails.organizer.phone || '未知'}}
									</view>
									<image src="../../static/call.png" mode=""
										style="width: 44rpx;height: 44rpx;margin-left: 14rpx;" @click="gotoCallPhone">
									</image>
								</view>
								<view class="pulic_info_item">
									<view class="pulic_info_item_left">
										<image src="../../static/time.png" mode=""></image>
									</view>
									<view class="pulic_info_item_right textOver">
										{{startTime}} {{endTime}}
									</view>
								</view>
							</view>
							<view class="divider"></view>
							<view class="active_desc">
								<view class="active_desc_title">
									活动介绍
								</view>
								<view class="active_desc_center">
									{{eventDetails.desc || '暂无'}}
								</view>
							</view>
							<!-- <view class="divider" style="margin-bottom: 200rpx;"></view> -->
						</view>
						<view class="" v-else style="padding-bottom:100rpx;">
							<view class="trends" v-if='trends'>
								<view class="trends-item" v-for="(item,index) in trends" :key="index">
									<view class="trends-item_top">
										<view class="trends-item_top_left">
											<img :src="item.avatar" alt="" />
										</view>
										<view class="trends-item_top_right">
											<view class="trends-item_top_right_top">
												{{item.nickName || ''}}
											</view>
											<view class="trends-item_top_right_bottom">
												{{item.pubTime || ''}}
											</view>
										</view>
									</view>
									<view class="trends-item_center">
										{{item.dynamicDesc || ''}}
									</view>
									<view class="trends-item_bottom"
										:style="item.imgs.length==4?'padding: 0 34rpx;':''">
										<view class="trends-item_bottom_item" v-for="(i,idx) in item.imgs"
											v-if='item.imgs' :style="item.imgs.length==4?'width: 32%;':''">
											<img :src="i" alt="" />
										</view>
									</view>
								</view>
							</view>
							<view class="nonemore" v-else>
								暂时没有动态
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 300rpx;">
		</view>
		<view class="btn" v-if="eventDetails.isOrganizer || eventDetails.isRegimentaler && optionValue">
			<view class="btn_left">
				<view class="btn_left_left" @click="shareModel">
					<view class="">
						<image src="../../static/Invite.png" mode=""></image>
					</view>
					<view class="btn_left_text color">
						邀请好友
					</view>
					<!-- <button open-type="share" @click="shareActive" class="shareBnt">邀请好友</button> -->
				</view>
				<view class="btn_left_center" v-if="showEdit" @click="tapEdit">
					<view class="">
						<image src="../../static/edit.png" mode=""></image>
					</view>
					<view class="btn_left_text">
						编辑
					</view>
				</view>
				<view class="btn_left_right" @click="tapCopy" v-if="eventDetails.isRegimentaler">
					<view class="">
						<image src="../../static/copy.png" mode=""></image>
					</view>
					<view class="btn_left_text">
						复制
					</view>
				</view>
			</view>
			<view class="" v-if="eventDetails.isRegimentaler">

			</view>
			<view class="btn_right" @click="toggle('bottom')" v-if="eventDetails.isRegist==false">
				<text v-if="!eventDetails.amount||eventDetails.amount==0">免费</text> 报名<text
					v-if="eventDetails.amount!=null&&eventDetails.amount*1>0"> ¥ {{eventDetails.amount}}</text>
			</view>
			<view class="application" v-else @click="gotoMyActive">
				已报名
			</view>
		</view>
		<view class="btn" v-else style="display:flex;width:100%;justify-content: space-around;">
			<view class="btn_left">
				<view class="btn_left_left" @click="shareModel">
					<view class="">
						<image src="../../static/Invite.png" mode=""></image>
					</view>
					<view class="btn_left_text color">
						邀请好友
					</view>
				</view>
			</view>
			<view class="" v-if="eventDetails.isRegimentaler">

			</view>
			<view class="application" @click="toggle('bottom')" v-if="eventDetails.isRegist==false">
				<text v-if="!eventDetails.amount||eventDetails.amount==0">免费</text> 报名 ¥
				<text v-if="eventDetails.amount!=null&&eventDetails.amount*1>0">{{eventDetails.amount}}</text>
			</view>
			<view class="application" v-else @click="gotoMyActive">
				已报名
			</view>
			<!-- <view class="application" @click="toggle('bottom')">
				报名 ¥ {{eventDetails.amount}}
			</view> -->
			<view class="release" @click="publishUpdatesMethod">
				发布
			</view>
		</view>

		<uni-popup ref="popupApplication" background-color="#fff" @change="changePopupDesc">
			<view class="popup_title">
				<view class="popup_top">
					<view class="">
						活动介绍
					</view>
					<view class="">
						<image src="../../static/close.png" mode=""
							style="width: 28rpx;height: 28rpx;margin-right: 50rpx;"></image>
					</view>
				</view>
				<view class="popup_center">
					<textarea name="" id="" cols="30" rows="10" v-model="activeData.desc"></textarea>
				</view>
				<view class="popup_right" @click="closePopup">
					保存
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popupApplication" background-color="#fff" @change="changePopupDesc">
			<view class="popup_title">
				<view class="popup_top">
					<view class="">
						活动介绍
					</view>
					<view class="">
						<image src="../../static/close.png" mode=""
							style="width: 28rpx;height: 28rpx;margin-right: 50rpx;"></image>
					</view>
				</view>
				<view class="popup_center">
					<textarea name="" id="" cols="30" rows="10" v-model="activeData.desc"></textarea>
				</view>
				<view class="popup_right" @click="closePopup">
					保存
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="shareBnt" background-color="#fff" @change="shareBntDesc">
			<view class="" style="width: 75vw;">
				<view class="" style="text-align:center;padding:22px 0;wxcs_style_padding:40rpx 0;">
					是否邀请好友？
				</view>
				<view class="" style="display:flex;margin-bottom:60rpx;">
					<button @click="closeSharePopup" style="width: 45%;">否</button>
					<button open-type="share" @click="shareActive" class="shareBnt" style="width: 45%;">是</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" background-color="#fff" @change="changePopup">
			<view class="popup_title">
				<view class="popup_top">
					<view class="popup_top_title">
						报名确认
					</view>
					<view class="" @click='closeJoin'>
						<image src="../../static/close.png" mode=""
							style="width: 28rpx;height: 28rpx;margin-right: 50rpx;"></image>
					</view>
				</view>
				<view class="popup_center">
					<view class="popup_center_title">
						{{eventDetails.title || ''}}
					</view>
					<view class="popup_center_address">
						<view class="">
							{{eventDetails.address || ''}}
						</view>
					</view>
					<view class="">
						<view class="">
							{{startTime}} - {{endTime}}
						</view>
					</view>
				</view>
				<view class=""
					style="/*width:662rpx;*/height:1px;background:#ECECEC;border-radius:18px;margin:auto;width:379px;margin-bottom:40rpx;">

				</view>
				<view class="user_info">
					<view class="user_info_item">
						<view class="user_info_item_left">
							姓名：
						</view>
						<view class="user_info_item_right">
							<input type="text" placeholder="请输入您的姓名" v-model="userName" />
						</view>
					</view>
					<view class="user_info_item">
						<view class="user_info_item_left">
							身份证号：
						</view>
						<view class="user_info_item_right">
							<input type="text" placeholder="请输入您的身份证号" v-model="idCard" />
						</view>
					</view>
					<view class="user_info_item">
						<view class="user_info_item_left">
							电 话：
						</view>
						<view class="user_info_item_right">
							<input type="text" placeholder="请输入您的电话" v-model='phone' />
						</view>
					</view>
				</view>
				<view class="popup_right" @click="closePopup">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		activeDetail,
		activeDetailList,
		createOrder,
		publishUpdates,
		activeDetailView,
		getUserDetails
	} from "../../api/request.js"
	import {
		timestampToDateTime
	} from '../../utils/time.js';
	import {
		validateChineseIDCard
	} from "../../utils/idCard.js"
	import {
		validateChinesePhoneNumber
	} from "../../utils/phone.js"
	export default {
		data() {
			return {
				optionValue: true,
				eventDetails: null,
				startTime: 0,
				endTime: 0,
				registerEnd: 0,
				trends: null,
				activityId: null,
				userName: null,
				idCard: null,
				phone: null,
				peopleNum: 0,
				isShowApplication: false,
				isOrganizer: false,
				shareCode: null,
				showDetail: true,
				addDynamicVo: {},
				showEdit: false,
				showJoin: false
			};
		},
		async onLoad(e) {
			const that = this
			console.log(e, 'jkdgajgakdgkajgafskjg');
			if (e.isView) {
				let res = await activeDetailView(e.id)
				console.log(res);
				this.eventDetails = res.data
			} else {
				this.activityId = e.id
				console.log(e);
				const that = this
				that.getData()
				uni.getStorage({
					key: "shareCode",
					success(res) {
						that.shareCode = res.data
					}
				})
			}

		},
		onShow() {
			console.log(getApp().globalData.route);
		},
		methods: {
			closeJoin() {
				this.$refs.popup.close()
			},
			gotoMyActive() {
				uni.navigateTo({
					url: "/pages/activitiesParticipated/activitiesParticipated"
				})
			},
			tapEdit() {
				console.log(this.activityId, ' this.activityId');
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 2].route // 获取当前页面路由，也就是最后一个打开的页面路由
				getApp().globalData.route = curRoute;
				getApp().globalData.id = this.activityId;
				getApp().globalData.search = true;
				getApp().globalData.edit = true;
				uni.switchTab({
					url: "/pages/releaseActivity/releaseActivity?id=" + this.activityId + "&search?=true"
				})
			},
			changePopupDesc() {},
			tapCopy() {
				console.log(this.activityId, ' this.activityId');
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 2].route // 获取当前页面路由，也就是最后一个打开的页面路由
				getApp().globalData.route = curRoute;
				getApp().globalData.id = this.activityId;
				getApp().globalData.search = true;
				uni.switchTab({
					url: "/pages/releaseActivity/releaseActivity?id=" + this.activityId + "&search?=true"
				})
			},
			shareBntDesc(e) {
				console.log(e);
			},
			shareModel() {
				const that = this
				this.$refs.shareBnt.open("center")
			},
			shareActive() {
				uni.share({
					provider: 'weixin', // 分享平台，这里以微信为例，可根据需求选择其他平台
					type: 5, // 分享类型，5表示分享小程序
					title: '活动宝', // 分享标题
					miniProgram: {
						id: 'wxdf1aed9fae95eaeb', // 你的小程序的AppID
						path: 'pages/index/index', // 小程序页面路径
						type: 0, // 0表示正式版，1表示开发版，2表示体验版
						// webUrl: 'https://youruniappdomain.com', // 兼容微信低版本的网页链接
						imageUrl: this.eventDetails.image, // 分享显示的图片
						title: this.eventDetails.title, // 小程序标题
						desc: this.eventDetails.desc, // 小程序描述
						shareCode: this.shareCode
					},
					success: function(res) {
						console.log('分享成功');
						this.$refs.shareBnt.open("center")
					},
					fail: function(err) {
						console.log('分享失败', err);
					}
				});
			},
			gotoCallPhone() {
				if (this.eventDetails.organizer.phone) {
					uni.makePhoneCall({
						phoneNumber: this.eventDetails.organizer.phone //仅为示例
					});
				} else {
					uni.showToast({
						icon: "none",
						title: "暂时无法拨打"
					})
				}
			},
			navigateToMap() {
				uni.openLocation({
					latitude: this.eventDetails.latitude, // 目标位置的纬度
					longitude: this.eventDetails.longitude, // 目标位置的经度
					// name: this.eventDetails.address, // 可选，目标位置的名称
					address: this.eventDetails.address, // 可选，目标位置的地址
					scale: 18, // 可选，地图缩放级别，范围5-18，默认为18
					success() {
						console.log('打开导航成功');
					},
					fail(err) {
						console.error('打开导航失败', err);
					}
				});
			},
			gotoPeopleList() {
				uni.navigateTo({
					url: `/pages/ListOfApplicants/ListOfApplicants?activityId=${this.activityId}`
				})
			},
			changePopup() {
				console.log('changePopup');
			},
			closeSharePopup() {
				this.$refs.shareBnt.close()
			},
			async closePopup() {
				if (!this.userName) {
					uni.showToast({
						icon: "none",
						title: "请输入姓名"
					})
					return
				}
				if (!this.idCard) {
					uni.showToast({
						icon: "none",
						title: "请输入身份证"
					})
					return
				}
				if (!this.phone) {
					uni.showToast({
						icon: "none",
						title: "请输入手机号"
					})
					return
				}
				if (!validateChineseIDCard(this.idCard)) {
					uni.showToast({
						icon: "none",
						title: "身份证输入有误"
					})
					return
				}
				if (!validateChinesePhoneNumber(this.phone)) {
					uni.showToast({
						icon: "none",
						title: "手机号输入有误"
					})
					return
				}
				console.log(this.activityId, ' this.activityId', this.activityId * 1);
				let res = await createOrder({
					activityId: this.activityId,
					userName: this.userName,
					idCard: this.idCard,
					phone: this.phone
				})
				const {
					nonceStr,
					orderPkg,
					paySign,
					signType,
					timeStamp
				} = res
				wx.requestPayment({
					timeStamp: timeStamp + '',
					nonceStr,
					"package": orderPkg,
					"signType": "MD5",
					paySign,
					"success": function(res) {
						uni.showToast({
							title: "报名成功"
						})
						console.log(res, 'pay');
					},
					"fail": function(res) {
						console.log(res, 'pay');
					},
					"complete": function(res) {
						console.log(res, 'pay');
					}
				})
				this.$refs.popupApplication.close()
				this.$refs.shareBnt.close()
				this.$refs.popup.close()
				console.log(res);
			},
			async toggleApplication(type) {
				console.log('toggleApplication');
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popupApplication.open(type)
				// let res = await createOrder()
			},
			async getData() {
				console.log(222);
				let data = await activeDetail(this.activityId)
				let res = await activeDetailList(this.activityId, 1)
				this.eventDetails = data
				this.trends = res.records
				const timestamp = Date.now();
				if (timestamp < this.eventDetails.endTime) {
					this.isShowApplication = true
				}
				console.log(timestamp, 'timestamp', this.eventDetails.registerEnd);
				if (timestamp < this.eventDetails.registerEnd && this.eventDetails.isOrganizer == true) {
					this.showEdit = true
				}
				if (this.eventDetails.isOrganizer != true && timestamp < this.eventDetails.registerEnd) {
					this.showJoin = true
				}
				console.log(timestamp, this.eventDetails.endTime);
				if (this.eventDetails) {
					this.startTime = timestampToDateTime(this.eventDetails.startTime)
					this.endTime = timestampToDateTime(this.eventDetails.endTime)
					this.registerEnd = timestampToDateTime(this.eventDetails.registerEnd)
				}
				this.isOrganizer = data.isOrganizer
				if (data.registerAvatar) {
					this.peopleNum = data.registerAvatar.length
				}
				console.log(this.eventDetails, 'data', res, JSON.stringify(this.eventDetails));
				// this.eventDetails
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
				if (type == 'bottom') {
					const that = this
					uni.showLoading({
						title: "数据加载中....",
					})
					uni.getStorage({
						key: 'token',
						success: async res => {
							let result = await getUserDetails(res.data)
							that.idCard = result.idCard
							that.userName = result.realName
							that.phone = result.phone
							console.log(result, 'result', result.nickName);
							uni.hideLoading()
						},
						fail: async res => {

							setTimeout(() => {
								that.gethotActive({
									pageNo: that.pageNo,
								});
								that.showActive();
								uni.hideLoading()
								this.getUserCodeMeth()
								uni.getStorage({
									key: 'token',
									success: async res => {
										let result = await getUserDetails(res.data)
										console.log(result, 'result', result.nickName);
										that.idCard = result.idCard
										that.userName = result.nickName
										that.phone = result.phone
									},
								})
							}, 2000)
						}
					})
				}
				console.log(111);
			},
			async publishUpdatesMethod() {
				uni.navigateTo({
					url: "/pages/postingDetails/postingDetails?id=" + this.activityId
				})
			},
			goback() {
				uni.navigateBack()
				uni.switchTab({
					url: "/" + getApp().globalData.route,
					fail(e) {
						uni.navigateTo({
							url: "/" + getApp().globalData.route,
							fail(e) {
								console.log(e, 'fail');
							},
							complete(e) {
								console.log(e);
							}
						})
					},
					complete(e) {
						console.log(e);
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.shareBnt {
		background: white;
		border: 0;
	}

	.bg {
		width: 90%;
		position: absolute;
		height: 100%;
		left: 0;
		right: 0;
		margin: auto;
		background-color: #eee;
		border-radius: 30rpx;
	}

	.pd {
		padding: 0 34rpx !important;
	}

	.vue-ref {
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		overflow: hidden;
	}

	.popup_center_address {
		margin-bottom: 16rpx;
	}

	.eee {
		background-color: #eee;
	}

	.p1 {
		background-color: white;
		background: url("../../static/active_bg.png");
		background-repeat: no-repeat;
	}

	.p2 {
		background-color: white;
		background: url("../../static/active_bg2.png");
		background-repeat: no-repeat;
	}

	// .uni-popup__wrapper {
	// 	width: 80%;
	// 	border-radius: 20rpx;
	// }

	// .shareBnt::after {
	// 	background: white;
	// 	border: 0;
	// }

	.nonemore {
		width: 100%;
		height: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #A3A3A3;
		line-height: 40rpx;
		text-align: center;
		font-style: normal;
		display: inline-block;
		margin-top: 40rpx;
	}

	.popup_center {
		.popup_center_title {
			height: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 40rpx;
		}
	}

	.user_info {
		display: flex;
		flex-direction: column;
		width: 90%;
		margin: auto;
		margin-bottom: 68rpx;

		.user_info_item {
			// padding-bottom: 24rpx;
			display: flex;
			margin-bottom: 20rpx;

			.user_info_item_left {
				width: 140rpx;
				height: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 60rpx;
				text-align: left;
				font-style: normal;
				margin-right: 26rpx;

			}

			.user_info_item_right {
				flex: 1;
				padding: 20rpx;
				border-radius: 8rpx;
				border: 2rpx solid #F2F2F2;
			}
		}
	}

	.popup_title {
		display: flex;
		flex-direction: column;

		.popup_top {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #1A1A1A;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			margin-left: 40rpx;
			margin-top: 40rpx;
			margin-bottom: 52rpx;
			display: flex;
			justify-content: space-between;
		}

		.popup_center {
			padding: 30rpx;
			width: 90%;
			margin: auto;
			background: #FFFFFF;
			border-radius: 30rpx;
			// border: 2rpx solid #EDEDED;
		}

		.popup_right {
			width: 90%;
			margin: auto;
			height: 88rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			font-style: normal;
			background: conic-gradient(from 90deg at 50% 0%, #F09583 0%, #F9301C 100%);
			border-radius: 16rpx;
		}
	}

	.application {
		width: 282rpx;
		height: 88rpx;
		background: url("../../static/tabBg2.png");
		border-radius: 16rpx;
		font-family: DINAlternate, DINAlternate;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
		margin-top: 40rpx;
	}

	.release {
		width: 278rpx;
		height: 88rpx;
		background: url("../../static/tabBg.png");
		// background: conic-gradient(from 90deg at 50% 0%, rgba(240, 149, 131, 0.36) 0%, rgba(249, 48, 28, 0.36)100%);
		border-radius: 16rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #F7422D;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
		margin-top: 40rpx;
		margin-right: 20rpx;
	}

	.trends {
		padding-bottom: 160rpx;

		.trends-item {
			margin-top: 60rpx;
			display: flex;
			flex-direction: column;

			.trends-item_top {
				display: flex;
				margin-bottom: 34rpx;

				.trends-item_top_left {
					margin-right: 26rpx;

					image {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
					}
				}

				.trends-item_top_right {
					display: flex;
					flex-direction: column;

					.trends-item_top_right_top {
						height: 40rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						margin-bottom: 6rpx;
					}

					.trends-item_top_right_bottom {
						font-family: DINAlternate, DINAlternate;
						font-weight: bold;
						font-size: 26rpx;
						color: #000000;
						line-height: 30rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}

			.trends-item_center {
				width: 90%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #000000;
				text-align: left;
				font-style: normal;
				margin-bottom: 22rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				margin: auto;
				margin-bottom: 20rpx;
			}

			.trends-item_bottom {
				display: flex;
				// justify-content: space-around;
				padding: 0 33rpx;
				flex-wrap: wrap;

				.trends-item_bottom_item {
					width: 30%;
					height: 188rpx;
					margin-right: 18rpx;
					margin-bottom: 18rpx;

					image {
						width: 188rpx;
						height: 188rpx;
						border-radius: 10rpx;
					}
				}
			}
		}
	}

	.color {
		color: #F7422D;
	}

	.btn_left {
		margin-left: 50rpx;
		display: flex;

		.btn_left_left,
		.btn_left_center,
		.btn_left_right {
			margin-right: 62rpx;
			display: flex;
			text-align: center;
			flex-direction: column;
			margin-top: 46rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			.btn_left_text {
				width: 80rpx;
				height: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				line-height: 24rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}

	.btn_right {
		width: 288rpx;
		height: 88rpx;
		background: conic-gradient(from 90deg at 50% 0%, #F09583 0%, #F9301C 100%);
		border-radius: 16rpx;
		margin-right: 28rpx;
		text-align: center;
		line-height: 88rpx;
		font-family: DINAlternate, DINAlternate;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		font-style: normal;
		margin-top: 40rpx;
	}

	.registration_deadline {
		margin: auto;
		height: 84rpx;
		background: conic-gradient(from 90deg at 50% 0%, #FC7356 0%, #F73F2B 100%);
		box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(109, 0, 0, 0.16);
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;

		.registration_deadline_left_item {
			display: flex;

			.registration_deadline_left {
				margin-left: 42rpx;
				margin-top: 24rpx;
				width: 144rpx;
				height: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}

			.registration_deadline_center {
				margin-top: 24rpx;
			}

		}

		.registration_deadline_right {
			width: 160rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #F7422D;
			line-height: 60rpx;
			text-align: center;
			font-style: normal;
			margin-top: 12rpx;
			margin-right: 38rpx;
		}
	}

	.active_desc {
		display: flex;
		flex-direction: column;
		// margin-bottom: 100rpx;
		padding-bottom: 40rpx;
		// border-bottom: 2rpx solid #eee;

		.active_desc_title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #000000;
			line-height: 36rpx;
			font-style: normal;
			margin-left: 44rpx;
			margin-bottom: 40rpx;
		}

		.active_desc_center,
		.active_desc_detail {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #000000;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			margin-left: 44rpx;
		}
	}

	.pulic_info {
		display: flex;
		flex-direction: column;

		.pulic_info_item {
			margin-bottom: 24rpx;
			display: flex;
			min-height: 32rpx;
			width: 90%;
			margin: auto;

			.pulic_info_item_left {
				margin-right: 18rpx;

				image {
					width: 26rpx;
					height: 26rpx;
				}
			}

			.pulic_info_item_right {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #000000;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}

	.create_user {
		width: 90%;
		margin: auto;
		display: flex;
		margin-top: 58rpx;

		.create_user_img {
			margin-right: 28rpx;

			image {
				width: 88rpx;
				height: 88rpx;
				border-radius: 80%;
			}
		}

		.create_user_detail {
			display: flex;

			.create_user_detail_text {
				margin-top: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.create_user_detail_desc {
				width: 136rpx;
				height: 34rpx;
				background-color: rgba(250, 72, 53, 0.12);
				border-radius: 8rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FA2C17;
				line-height: 32rpx;
				margin-top: 24rpx;
				font-family: PingFangSC, PingFang SC;
				text-align: center;
				font-style: normal;
				margin-left: 14rpx;
			}
		}
	}

	.eventDetails_container {
		width: 90%;
		margin: auto;
		// background: url("../../static/active_bg2.png") no-repeat;
		background-size: 100%;
		// background-color: #eee;
		border-radius: 41rpx;
		border: 1rpx solid #eee;
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
	}

	.divider {
		width: 100%;
		height: 1px;
		background-color: #cccccc;
		margin: 40rpx 0;
	}

	.tab {
		display: flex;
		align-items: flex-end;
	}

	// .tab .item {
	// 	flex: 1;
	// 	height: 40px;
	// 	background: #eee;
	// 	border-radius: 5px 5px 0 0;
	// 	position: relative;
	// 	list-style: none;
	// 	text-align: center;
	// 	width: 128rpx;
	// 	height: 70rpx;
	// 	font-family: PingFangSC, PingFang SC;
	// 	font-weight: 500;
	// 	font-size: 32rpx;
	// 	color: #1A1A1A;
	// 	line-height: 70rpx;
	// 	text-align: center;
	// 	font-style: normal;
	// }

	.tab .right {
		flex: 1;
		height: 40px;
		border-radius: 5px 5px 0 0;
		position: relative;
		list-style: none;
		text-align: center;
		width: 128rpx;
		height: 70rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #1A1A1A;
		line-height: 70rpx;
		text-align: center;
		font-style: normal;
	}

	.tab .left {
		flex: 1;
		height: 40px;
		border-radius: 5px 5px 0 0;
		position: relative;
		list-style: none;
		text-align: center;
		width: 128rpx;
		height: 70rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #1A1A1A;
		line-height: 70rpx;
		text-align: center;
		font-style: normal;
	}

	// .tab .item.active {
	// 	background: #fff;
	// 	width: 128rpx;
	// 	height: 70rpx;
	// 	font-family: PingFangSC, PingFang SC;
	// 	font-weight: 500;
	// 	font-size: 32rpx;
	// 	color: #1A1A1A;
	// 	line-height: 70rpx;
	// 	font-style: normal;
	// }

	.tab .item:first-child:before {
		content: '';
		display: none;
		width: 10px;
		height: 100%;
		background: #ECECEC;
		position: absolute;
		right: -5px;
		top: 0;
		z-index: 10;
		border-radius: 0 5px 0 0;
		transform: skew(10deg);
	}

	.tab .item:first-child.active:before {
		display: block;
	}

	.tab .item:last-child:before {
		content: '';
		display: none;
		width: 10px;
		height: 100%;
		background: #ECECEC;
		position: absolute;
		left: -5px;
		top: 0;
		z-index: 10;
		border-radius: 5px 0 0 0;
		transform: skew(-10deg);
	}

	.tab .item:last-child.active:before {
		display: block;
	}

	.btn {
		position: fixed;
		bottom: 0rpx;
		left: 0;
		right: 0;
		width: 100%;
		height: 188rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 2rpx 0rpx rgba(15, 26, 62, 0.34);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		display: flex;
	}

	.uni-common-mt {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #1A0200;
		margin-top: 38rpx;
		// line-height: 44rpx;
		text-align: left;
		font-style: normal;
		margin-left: 40rpx;
		margin-bottom: 40rpx;
	}

	.account_container_detail_pay_user {
		margin-left: 40rpx;

		width: 90%;
		margin: auto;



	}

	.account_container_detail_pay_user_item {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 60rpx;
	}

	.account_container_detail_pay_user_left {
		display: flex;
		margin-right: 14rpx;

		.account_container_detail_pay_user_left_left image {
			width: 98rpx;
			height: 98rpx;
			border-radius: 50%;
		}

		.account_container_detail_pay_user_left_right {
			display: flex;
			flex-direction: column;
			margin-left: 14rpx;

			.account_container_detail_pay_user_left_right_top {
				margin-top: 12rpx;
				font-family: PingFangSC, PingFang SC;
				font-size: 28rpx;
				color: #1A1A1A;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.account_container_detail_pay_user_left_right_bottom {
				font-family: DINAlternate, DINAlternate;
				font-size: 32rpx;
				color: #000000;
				line-height: 38rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}

	.account_container_detail_pay_user_right {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}

	.statistics_num {
		display: flex;
		text-align: center;
		background: #FFF5F5;
		width: 90%;
		margin: auto;
		height: 160rpx;
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		border-radius: 32rpx;

		.statistics_num_text {
			margin-left: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FA2C17;
			line-height: 80rpx;
			text-align: left;
			font-style: normal;
		}

		.statistics_num_img {
			display: flex;

			image {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				margin-left: 40rpx;
			}

		}
	}

	.account_container {
		width: 90%;
		margin: auto;
		margin-top: 88rpx;

		.account_conatiner_top_bar {
			margin-bottom: 20rpx;
			display: flex;
		}
	}

	.account_container_detail_item {
		width: 90%;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		border: 2rpx solid #F3F3F3;
		display: flex;
		padding-left: 40rpx;
		padding-top: 20rpx;
		margin: auto;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.account_container_detail_item_left {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.account_container_detail_item_right {
			margin-top: 36rpx;
			font-family: DINAlternate, DINAlternate;
			font-weight: bold;
			font-size: 36rpx;
			color: #FA301B;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			margin-right: 40rpx;
		}
	}

	.account_container_detail {
		margin-top: -60rpx;
		background-color: white;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		position: absolute;
		left: 0;
		right: 0;
	}

	.account_container_num {
		// background: url("../../static/people-List/bg1.png") no-repeat 100%;

		background-size: 100% 100%;
		width: 100%;
		height: 432rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.account_container_num_detail {
			display: flex;
			flex-direction: column;
			margin-left: 80rpx;
			margin-top: 46rpx;

			.item1 {
				margin-top: 46rpx;
				font-family: DINAlternate, DINAlternate;
				font-weight: bold;
				font-size: 48rpx;
				color: #FFFFFF;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}

			.item2 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 50rpx;
				text-align: left;
				font-style: normal;
			}

			.item3 {
				font-family: DINAlternate, DINAlternate;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
			}

			.item4 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}
</style>